<template>
	<view class="box">
		<view class="swipers">
			<u-swiper :list="swiperList" imgMode="aspectFill" keyName="image" bgColor="transparent" height="160"
				circular></u-swiper>
		</view>
		<view class="notice flex_dq">
			<image :src="baseUrl + '/static/image/fuwu_speaker.png'" class="spearch" mode="aspectFill"></image>

			<view class="uni-margin-wrap">
				<swiper class="swiper" vertical circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item v-for="(itme,index) in noticeList" :key="index">
						<text class="title f26 c3">{{itme.title}}</text>
						<text class="time f22 c9">{{itme.create_time}}</text>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="fuwu_search">
			<view class="bar_input flex_dq" @click="openAddress">
				<image class="sms" :src="baseUrl + '/static/icon/i_search.png'" mode="aspectFill">
				</image>
				<text class="camouflage" :class="value.length>0?'c3':''">
					{{content}}
				</text>
			</view>
			<view class="fuwu_result flex_dq" v-if="value.length>0">
				<image v-if="!dailiData.id" class="fuwu_status" :src="baseUrl + '/static/image/fuwu_success.png'"
					mode="aspectFill">
				</image>
				<image v-else class="fuwu_status" :src="baseUrl + '/static/image/fuwu_fail.png'" mode="aspectFill">
				</image>
				<text v-if="!dailiData.id" class="fuwu_success f32">该地区正在寻找合作伙伴</text>
				<text v-else class="fuwu_fail">该地区服务中心已成立，请查询其他地区</text>
			</view>
		</view>
		<view class="">
			<image class="quanyi" :src="baseUrl + '/static/image/fw_interest.png'" mode="aspectFill"></image>
		</view>
		<view class="empty3">

		</view>
		<view class="btn_bottom">
			<view class="btn" @click="change">
				留言垂询
			</view>
		</view>

		<atAddress ref="scroll" :level="3" @change='chooseSuccess'></atAddress>

		<!-- <view class="main" v-for="item in list" :key="item.id">
			<view class="tit1">
				{{item.name}}
			</view>
			<view class="item" v-for="itm in item.condition">
				<text class="circle"></text>
				<text class="content">{{itm}}</text>
			</view>

			<view class="btn" @click="change(item.agent_type,item.id,item.name)">
				留言垂询
			</view>
		</view> -->
		<u-popup :show="show" :round="10" @close="show=false" :closeable="true">
			<view class="wrap">
				
				<view class="tit fw5">
					我们怎么称呼您？
				</view>
				<view class="iptwrap">
					<input class="ipt" type="text" v-model="name" placeholder="请填写您的姓名" />
				</view>
				
				<view class="tit fw5" style="margin-top: 30rpx;">
					我们怎么联系您？
				</view>
				<view class="iptwrap">
					<input class="ipt" type="number" v-model="phone" placeholder="请填写您的电话" />
					<text @click="iscan">使用本账号手机号</text>
				</view>
				<view class="tit fw5" style="margin-top: 30rpx;">
					如果有特别关心的问题，可以给我们留言
				</view>
				<view class="iptwrap">
					<!-- #ifdef H5||MP-WEIXIN -->
					<u--textarea class="bigipt textarea" v-model="contents" placeholder="请输入内容" count></u--textarea>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<u--textarea class="bigipt textarea" v-model="contents" placeholder="请输入内容"></u--textarea>
					<!-- #endif -->
					
				</view>
				<view class="btns" @click="submit">
					提交留言
				</view>
			</view>
		</u-popup>
		<u-popup :show="tipShow" mode="center" @close="tipShow=false" :closeable="true" bgColor="transparent"
			:closeOnClickOverlay="false">
			<view class="popup-content">
				<text class="popup-title h2">提示</text>
				<view class="popup-center">
					您的留言已提交，我们的工作人员稍后会主动与您联系，感谢您的耐心等待。
				</view>

				<text class="btnss" @click="tipShow=false">确定</text>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import maoScroll from '@/components/mao-scroll.vue'
	import {
		agentConsult,
		subconsult,
		getagentBanner,
		getagentQuery,
		getagentMessage
	} from "../../api/other.js"
	import {
		myuser
	} from "../../api/user.js"
	export default {
		data() {
			return {
				show: false,
				name: "",
				phone: "",
				contents: "",
				list: [],
				type: "",
				ids: "",
				tipShow: false,
				value: [],
				dailiData: {},
				baseUrl: this.$imageBaseUrl,
				// baseUrl: '',
				status: 0,
				swiperList: [],
				showNum: 1,
				lineHeight: 74,
				animationScroll: 800,
				animation: 1000,
				noticeList: [],
				content: "查询意向区县服务中心信息",
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500
			}
		},
		onLoad() {
			this.getlist()
			this.getuser()
			this.getagentBanner()
			this.getagentMessage()
		},
		components: {
			maoScroll
		},
		methods: {
			getagentBanner() {
				getagentBanner().then(res => {
					console.log(res);
					this.swiperList = res.data
				})
			},
			getagentMessage() {
				getagentMessage().then(res => {
					console.log(res);
					this.noticeList = res.data
				})
			},
			getuser() {
				myuser().then(res => {
					this.info = res.data
				})
			},
			iscan() {
				this.phone = this.info.mobile
			},
			//打开地址选择器
			openAddress() {
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				const data = {
					province_id: e.value[0].id,
					city_id: e.value[1].id,
					county_id: e.value[2].id
				}
				this.value = e.value
				this.content = this.value.map(item => item.name).join(' ')
				getagentQuery(data).then(res => {
					console.log(res);
					this.dailiData = res.data
				})


				// this.bankInfo.full_address = ''
				// let value = e.value;
				// this.bankInfo.province_id = e.value[0].id
				// this.bankInfo.city_id = e.value[1].id
				// this.bankInfo.full_address = value.map(item => item.name).join(' ')
			},
			change() {
				if (this.value.length == 0) {
					uni.$u.toast("请先选择需要查询的意向区县")
				} else {
					this.show = true
					this.contents = "我想咨询" + this.value.map(item => item.name).join('-') + "合作事宜"
				}

				// this.type = type
				// this.ids = id



			},
			getlist() {
				agentConsult().then(res => {
					console.log(res);
					this.list = res.data
				})
			},
			submit() {
				if (!uni.$u.test.mobile(this.phone)) {
					uni.$u.toast("请填写正确的手机号")
					return
				}
				subconsult({
					name: this.name,
					mobile: this.phone,
					content: this.contents,
					agent_condition_id: 3,
					agent_type: 3 //默认是区县
				}).then(res => {
					if (res.code == 1) {
						this.show = false,
							setTimeout(() => {
								this.tipShow = true
							}, 500)
					} else {
						uni.$u.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		width: 750rpx;
		padding: 16rpx 30rpx;

	}

	.wrap {
		width: 750rpx;
		height: 840rpx;
		background: #F7F7F7;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		/* #ifdef MP-ALIPAY */
		margin: 0 auto;
		padding: 0 36rpx;
		/* #endif */
	}

	.notice {
		width: 100%;
		height: 154rpx;
		padding: 16rpx 10rpx 0rpx 20rpx;
		background: #FFFFFF;
		margin-bottom: 24rpx;
		border-radius: 18rpx;
		margin-top: 24rpx;
	}

	.line {
		margin: 0 auto;
		width: 550rpx;
		height: 76rpx;
		line-height: 38rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		margin-bottom: 16rpx;

		.time {
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}




	.spearch {
		width: 100rpx !important;
		height: 110rpx;
	}

	.fuwu_search {
		width: 100%;
		background: #FFFFFF;
		padding: 30rpx;
		border-radius: 18rpx;
	}

	.fuwu_result {
		width: 100%;
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.fuwu_status {
		width: 52rpx;
		height: 52rpx;
	}

	.fuwu_success {
		color: #ffc300;
	}

	.fuwu_fail {
		color: #E78C4C;
	}

	.quanyi {
		width: 690rpx;
		height: 636rpx;
		margin-top: 24rpx;
	}

	.bar_input {
		width: 100%;
		position: relative;
		background: #F7F7F7;
		border-radius: 18rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		// margin-left: 24rpx;
	}

	.bar_input::before {
		content: '';
		position: absolute;
		top: 20rpx;
		left: 70rpx;
		transform: translateX(-50%);
		height: 30rpx;
		width: 2rpx;
		background: #E5E5E5;
	}

	.sms {
		width: 32rpx;
		height: 30rpx;
		margin-left: 26rpx;
	}

	.camouflage {
		/* #ifdef MP-WEIXIN||MP-ALIPAY */
		width: 400rpx;
		/* #endif */
		/* #ifdef H5 ||MP-ALIPAY */
		width: 400rpx;
		/* #endif */
		margin-left: 36rpx;
		font-size: 28rpx;
		color: #999999;
	}

	.c3 {
		color: #333333;
	}

	.btns {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		margin: 0 auto;
		margin-top: 28rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.btn_bottom {
		width: 720rpx;
		height: 150rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #F7F7F7;
	}

	.btn {
		width: 580rpx;
		height: 80rpx;
		background: linear-gradient(270deg, #FA2222 2%, #FFC400 98%);
		border-radius: 190rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
	}

	.tit {
		width: 678rpx;
		margin: 0 auto;
		margin-top: 76rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #3D3D3D;
	}

	.iptwrap {
		position: relative;
		margin-top: 20rpx;

		>text {
			position: absolute;
			top: 50%;
			right: 60rpx;
			transform: translateY(-50%);
			font-weight: 400;
			font-size: 26rpx;
			color: #FFC300;
		}
	}

	.bigipt {
		width: 678rpx;
		height: 304rpx;
		background: #FFFFFF;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		border: none;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.ipt {
		width: 648rpx;
		height: 64rpx;
		background: #FFFFFF;
		margin: 0 auto;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
		padding-left: 30rpx;
		// margin-top: 20rpx;
	}

	.main {
		width: 690rpx;
		min-height: 254rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		position: relative;

		.tit1 {
			padding-top: 24rpx;
			margin-left: 24rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #3D3D3D;
		}

		.item {
			margin-left: 32rpx;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			.circle {
				display: block;
				width: 10rpx;
				height: 10rpx;
				background: #FFC300;
				border-radius: 50%;

			}

			.content {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-left: 20rpx;
			}

		}


	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48rpx;
		width: 602rpx;
		max-height: 800rpx;
		overflow: auto;
		background: #FFFFFF;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		padding-bottom: 30rpx;

	}

	.popup-title {
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 32rpx;
		color: #333333;
	}

	.textarea {
		width: 660rpx;
		height: 240rpx;
		margin: 0 auto;
		border: none !important;
	}

	.popup-center {
		width: 500rpx;

		display: flex;
		align-items: center;
		justify-content: center;
		overflow: auto;

		>image {
			margin-left: 14rpx;
			width: 20rpx;
			height: 20rpx;
		}
	}

	.btnss {
		width: 264rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 280rpx 280rpx 280rpx 280rpx;
		text-align: center;
		line-height: 72rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}

	/* #ifdef MP-WEIXIN */
	/deep/.u-border {
		border: none !important;
	}

	/deep/ .u-textarea {
		width: 648rpx !important;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	/* #endif */

	.uni-margin-wrap {
		width: 550rpx;
	}

	.swiper {
		padding: 16rpx 10rpx 0rpx 20rpx;
		height: 118rpx;
	}

	.swiper-item {
		width: 100%;
		display: block;
		text-align: center;
	}

	.swiper-list {
		margin-bottom: 0;
	}

	.uni-common-mt {
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}
	.title {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.time {
		display: flex;
		justify-content: flex-end;
	}
</style>